<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<style style="text/css">
	.a-title{ text-align: right;border:0;font-size:1.8em; }
	.tag_box{ list-style: none;font-size:1em;overflow: hidden; }
	.inline li {float: left;margin: .2em .5em;}
	.tag_box li:hover {opacity: 1;}
	.tag_box li {
				background: #c33;
				color: #fff;
				padding: .3em .5em;
				list-style: none;
				border-radius: 3px;
				-ms-border-radius: 3px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				opacity: 0.85;
			}

</style>
<div>
	<h1 class="a-title">Categories</h1>
	<ul class="tag_box inline">
        <c:forEach items="${tags}" var="t">
            <li><a class="bk" href="#${t.tag}">${t.tag}</a></li>
        </c:forEach>
	</ul>
	<div>
        <c:forEach items="${tags}" var="t">
            <div class="i-title">${t.tag}(${fn:length(t.articleMeta)})</div>
            <a name="${t.tag}"></a>
            <ul>
                <c:forEach items="${t.articleMeta}" var="a">
                    <li>${a.formatTime} &gt;&gt; <a class="bkred" href="article/${a.stitle}">${a.title}</a></li>
                </c:forEach>
            </ul>
        </c:forEach>
	</div>
</div>
